<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="refInp" />
      <button @click="onOk">确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="onEdit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    onOk() {
      this.title = this.editValue
      this.isShowEdit = false
    },
    onEdit() {
      this.editValue = this.title
      this.isShowEdit = true // 显示输入框，输入框会立刻显示出来吗？不会，因为是视图更新是异步的
      // 让输入框自动获取焦点
      // 1. 要先拿到input的dom对象
      // 2. 调用focus()方法获取焦点

      // 数据一更新，马上去获取dom，是拿不到的，因为视图还没有更新完成 
      console.log(this.$refs.refInp, 'hehe');
      // 视图的更新是异步的，这里拿不到dom
      // this.$refs.refInp.focus()


      // 解决办法：等待视图渲染完毕后，再去操作dom，获取焦点
      // $nextTick(回调函数)：Vue内部会在视图更新完毕后，自动调用该回调函数
      this.$nextTick(() => {
        // 如果代码执行到这里，此时，视图更新完毕没？完毕了
        this.$refs.refInp.focus()
      })
    }
  },
}
</script>

<style>
</style>